<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
*{padding:0; margin:0}
body{font-size:12px; font-family:"微软雅黑","宋体"; color:#333;}
h1{font-size:16px; background:#ccc; padding:5px 10px; margin-bottom:15px}
.effect{ margin-bottom:15px; padding:0 10px}
button{width:50px;}
/* Clear Fix */ 
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac \*/ 
.clearfix { display:block; }
/* End hide from IE Mac */ 
/*tab*/
#e2 ul{list-style:none; overflow:hidden; height:1%; width:240px}
#e2 li{float:left; cursor:pointer; padding:5px 0; width:78px; border:1px solid #ccc; text-align:center}
#e2 li.current{ font-weight:bold; color:blue;}
#tab_content1 div,#tab_content2 div,#tab_content3 div,#tab_content4 div{ width:228px; height:150px; padding:10px 0 0 10px; border:1px solid #ccc; background:white}
#tab_content4 div{ height:180px}
</style>
<script type="text/javascript" src="../js/min/base-min.js"></script>
<script type="text/javascript" src="../js/min/Tab-min.js"></script>
</head>

<body>
<div class="effect clearfix" id="e2">
    <pre>调用方法：new Tab("tab_test1", "li", "tab_content1", "div");
    </pre>
    <pre>调用方法：new Tab("tab_test2", "li", "tab_content2", "div", {
	  event:"mouseover",
	  autoPlay:true,
	  timeout:3000,
	  effect:"fade",
	  fadeStep:5}
	);
    </pre>
	<div style="float:left; margin-right:20px;">
		<ul id="tab_test1">
			<li>Tab1</li>
			<li>Tab2</li>
			<li>Tab3</li>
		</ul>
		<div id="tab_content1">
			<div>content1</div>
			<div style="display:none">content2</div>
			<div style="display:none">content3</div>
		</div>
		<button onclick="t1.prev()">PREV</button><button onclick="t1.next()">NEXT</button>
	</div>
	<div style="float:left">
		<ul id="tab_test2">
			<li>Tab1</li>
			<li>Tab2</li>
			<li>Tab3</li>
		</ul>
		<div id="tab_content2">
			<div><img src="img/logo.png"/></div>
			<div style="display:none"><img src="img/logo.png"/></div>
			<div style="display:none"><img src="img/logo.png"/></div>
		</div>
	</div>
	<div style="clear:both;margin-top:40px">&nbsp;</div>
	<pre>调用方法：new Tab("tab_test3", "li", "tab_content3", "div", {event:"mouseover", loop:false, index:"random"});
    </pre>
    <pre>调用方法：Tab.rotation("tab_content4", "div", 1000);
    </pre>
	<div style="float:left;margin-right:20px">
		<ul id="tab_test3">
			<li>Tab1</li>
			<li>Tab2</li>
			<li>Tab3</li>
		</ul>
		<div id="tab_content3">
			<div style="display:none">随机content1</div>
			<div style="display:none">随机content2</div>
			<div style="display:none">随机content3</div>
		</div>
		<button onclick="t3.prev()">PREV</button><button onclick="t3.next()">NEXT</button>
	</div>
	<div style="float:left">
		<div id="tab_content4">
			<div>轮换content1</div>
			<div style="display:none">轮换content2</div>
			<div style="display:none">轮换content3</div>
		</div>
	</div>
</div>
</body>
<script>
window.onload = function(){
	t1 = new Tab("tab_test1", "li", "tab_content1", "div");
	t2 = new Tab("tab_test2", "li", "tab_content2", "div", {event:"mouseover",autoPlay:true,timeout:3000,effect:"fade",fadeStep:5});
	t3 = new Tab("tab_test3", "li", "tab_content3", "div", {event:"mouseover", loop:false, index:"random"});
	Tab.rotation("tab_content4", "div", 1000);
}
</script>
</body>
</html>
